<template>
	<el-dialog
    class="wechat-list-dialog"
    title="管理公众号"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeWechatDialog()">
    <div class="main">
      <div class="header">
        <div class="header-left">
          <tabBtn
            :tabList="tabList"
            :isInit="false"
            @change="tabChange"/>
          <!-- <ul class="tab-list">
            <li class="tab-item"
              :class="{active: currTabName === 'wechat'}"
              @click="cutoverTab('wechat')">公众号</li>
            <li class="tab-item"
              :class="{active: currTabName === 'enterprise'}"
              @click="cutoverTab('enterprise')">企业号</li>
          </ul> -->
        </div>
      </div>
      <div class="cont">
        <!-- 微信号列表 -->
        <div class="wechat-wrapper"
          v-show="currTabName === 'wechat'">
          <ul class="wechat-list"
            v-if="wechatList.length">
            <li class="wechat-item"
              :class="{active: info.appId === appId}"
              v-for="(info, i) in wechatList"
              :key="`wechat${i}`">
              <div class="title">
                <p class="name">{{info.wechatName}}</p>
              </div>
              <div class="info">
                <div class="info-left">
                  <p class="text">编号：{{info.id}}</p>
                  <p class="text">微信：{{info.wechatUid || ''}}</p>
                  <p class="text">类型：{{info.wechatType == '1'? '订阅号' : '服务号'}}</p>
                  <p class="text">粉丝：{{info.fansCount}}</p>
                  <p class="text time">{{info.authorizationTime}}</p>
                </div>
                <div class="info-right">
                  <div v-if="!info.isAuth" class="status">未认证</div>
                  <div v-else class="status active">已认证</div>
                  <div class="qrcode">
                    <img :src="getWxImg(info.qrcodeImg)" alt="">
                  </div>
                </div>
                <div class="btn-wrapper">
                  <p @click="handleChage(info)" class="btn">切换公众号</p>
                </div>
              </div>
            </li>
          </ul>
          <div class="guide-wrapper"
            v-if="!loading && !wechatList.length">
            <wechatGuide
              @success="addWechatSuccess()"/>
          </div>
        </div>
        <!-- 企业号列表 -->
        <div class="enterprise-wrapper"
          v-show="currTabName === 'enterprise'">
          <ul class="wechat-list"
            v-if="enterpriseList.length">
            <li
              class="wechat-item"
              :class="{active: info.appId === appId}"
              v-for="(info, i) in enterpriseList"
              :key="`wechat${i}`">
              <div class="title">
                <p class="name">{{info.wechatName}}</p>
              </div>
              <div class="info">
                <div class="info-left">
                  <p class="text">编号：{{info.id}}</p>
                  <p class="text">微信：{{info.wechatUid || ''}}</p>
                  <p class="text">类型：{{info.wechatType == '1'? '订阅号' : '服务号'}}</p>
                  <p class="text">粉丝：{{info.fansCount}}</p>
                  <p class="text time">{{info.authorizationTime}}</p>
                </div>
                <div class="info-right">
                  <div v-if="!info.isAuth" class="status">未认证</div>
                  <div v-else class="status active">已认证</div>
                  <div class="qrcode">
                    <img :src="getWxImg(info.qrcodeImg)" alt="">
                  </div>
                </div>
                <div class="btn-wrapper">
                  <p @click="handleChage(info)" class="btn">切换公众号</p>
                </div>
              </div>
            </li>
          </ul>
          <div class="guide-wrapper"
            v-if="!loading && !enterpriseList.length">
            <enterpriseGuide
              @success="addEnterpriseSuccess()"/>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import tabBtn from '../tabBtn'
import wechatGuide from './wechatGuide'
import enterpriseGuide from './enterpriseGuide'
export default {
  name: 'wechatDialog',
  components: {
    tabBtn,
    wechatGuide,
    enterpriseGuide
  },
  data () {
    return {
      isShow: true,
      loading: false,
      tabList: [
        { label: '公众号', type: 'wechat' },
        { label: '企业号', type: 'enterprise' }
      ],
      currTabName: 'wechat',
      appId: '',
      wechatList: [], // 公众号列表
      enterpriseList: [] // 企业号列表
    }
  },
  methods: {
    // 切换tab
    tabChange (type) {
      this.currTabName = type
      switch (type) {
        case 'wechat':
          this.fetchWechatList()
          break
        case 'enterprise':
          this.fetchEnterpriseList()
          break
        default:
          break
      }
    },
    // cutoverTab (type) {
    //   this.currTabName = type
    //   switch (type) {
    //     case 'wechat':
    //       this.fetchWechatList()
    //       break
    //     case 'enterprise':
    //       this.fetchEnterpriseList()
    //       break
    //     default:
    //       break
    //   }
    // },
    // 添加公众号成功
    addWechatSuccess () {
      this.fetchWechatList()
    },
    // 添加企业号成功
    addEnterpriseSuccess () {
      this.fetchEnterpriseList()
    },
    // 获取所有公众号的列表
    fetchWechatList () {
      if (this.loading) {
        return
      }
      this.loading = true
      // let url = `${this.SERVICE_WECHAT}/select`
      let url = `${this.SERVICE_WECHAT}/list`
      this.get(url).then(res => {
        this.loading = false
        if (res.data.code === 200) {
          let data = res.data.data
          sessionStorage.setItem('wechatList', JSON.stringify(data))
          if (data && data.length > 0) {
            this.wechatList = data
            // 通知服务器当前的 wechatId
            if (!sessionStorage.getItem('currWechatData')) {
              this.appId = data[0].appId
              let currWechatData = JSON.stringify(data[0])
              sessionStorage.setItem('currWechatData', currWechatData)
              sessionStorage.setItem('wechatId', data[0].id)
              sessionStorage.setItem('appid', data[0].appId)
              sessionStorage.setItem('wechatName', data[0].wechatName)
              sessionStorage.setItem('authorizationStatus', data[0].authorizationStatus)
              sessionStorage.setItem('wechatImg', data[0].qrcodeImg)
            } else {
              this.appId = sessionStorage.getItem('appid')
            }
          } else {
            sessionStorage.removeItem('currWechatData')
            sessionStorage.removeItem('wechatId')
            sessionStorage.removeItem('wechatName')
            sessionStorage.removeItem('authorizationStatus')
            sessionStorage.removeItem('wechatImg')
          }
        }
      }).catch(e => {
        this.loading = false
        this.handleError(e)
      })
    },
    // 获取当前租户下的企业号列表
    fetchEnterpriseList () {
      this.enterpriseList = []
    },
    // 切换公众号
    handleChage (info) {
      let appId = sessionStorage.getItem('appid')
      if (info.appId === appId) {
        return
      }
      this.$emit('change', info)
    },
    // 关闭弹框
    closeWechatDialog () {
      this.$emit('handleClose', false)
    }
  },
  created () {
    this.fetchWechatList()
  }
}
</script>
<style lang="stylus" scoped>
// 公共样式
.ml30
  margin-left 30px
// 平台列表
.wechat-list-dialog
  >>> .el-dialog
    width 100%
    max-width 1208px
    margin-top 9vh!important
    .el-dialog__header
      padding 20px 30px
      border-bottom 1px solid #ECEDF2
    .el-dialog__body
      // padding 0 0 30px 30px
      padding 0 0 30px
    .main
      width 100%
      .header
        width 100%
        padded_box(border-box, 18px 30px)
        display flex
        justify-content space-between
        align-items center
        .header-left
          display flex
          align-items center
          // .tab-list
          //   display flex
          //   align-items center
          //   .tab-item
          //     width 96px
          //     height 34px
          //     line-height 32px
          //     background #fff
          //     text-align center
          //     border-radius: 6px;
          //     font-size: 14px;
          //     color #22242F
          //     box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.13);
          //     border: 1px solid #ECEDF2;
          //     box-sizing border-box
          //     &.active
          //       background: #4C84FF;
          //       color #fff
          //       border-color #4C84FF
          //     & + .tab-item
          //       margin-left 30px
    .cont
      width 100%
      margin-top 6px
      .wechat-wrapper
        width 100%
        height 614px
        .guide-wrapper
          width 100%
          height 100%
      .enterprise-wrapper
        width 100%
        height 614px
        .guide-wrapper
          width 100%
          height 100%
      .wechat-list
        width 100%
        padded_box(border-box, 0 0 0 30px)
        scroll()
        scroll-bar()
        // height 614px
        display flex
        flex-wrap wrap
        .wechat-item
          // width 310px
          width 272px
          height 200px
          background: #FFFFFF;
          box-shadow: 0px 2px 4px 0px rgba(28, 41, 90, 0.04);
          border-radius: 10px;
          border: 1px solid #EAEDF7
          box-sizing border-box
          margin 0 20px 30px 0
          &.active
            border 1px solid #4C84FF
            .title
              background #4C84FF
              .name
                color #fff
            .bottom
              .btn
                border 1px solid #d2d4d8
                color #fff
                background #d2d4d8
          .title
            height: 44px;
            background: #D9DDE1;
            border-radius: 8px 8px 0px 0px;
            padded_box(border-box, 0 20px)
            display flex
            justify-content space-between
            align-items center
            .name
              width calc(100% - 40px)
              height 24px
              line-height 24px
              font-size: 16px;
              color #22242F
              no-wrap()
          .info
            width 100%
            display flex
            justify-content space-between
            padded_box(border-box, 18px 10px 20px 20px)
            position relative
            &:hover
              .btn-wrapper
                display block
            .info-left
              padded_box(border-box, 2px 0 0 )
              .text
                height: 16px;
                font-size: 12px;
                color: #5E5E66;
                line-height: 16px
                & + .text
                  margin-top 8px
                &.time
                  margin-top 11px
            .info-right
              display flex
              flex-direction column
              justify-content space-between
              align-items flex-end
              .status
                width: 44px;
                height: 25px;
                line-height: 26px;
                text-align center
                background: #D2D4D8;
                border-radius: 4px;
                font-size: 12px;
                color: #FFFFFF;
                margin-right -3px
                &.active
                  background: #13C789;
              .qrcode
                width 72px
                height 72px
                background #ddd
                img
                  width 100%
            .btn-wrapper
              width 100%
              height 150px
              background: linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)
              border-radius 0 0 10px 10px
              position absolute
              bottom 0
              left 50%
              transform translate(-50%, 0)
              display none
              .btn
                width: 220px;
                height: 36px;
                line-height: 36px;
                text-align center
                border-radius: 8px;
                border: 1px solid #fff
                font-size: 16px;
                color: #fff;
                box-sizing border-box
                cursor pointer
                position absolute
                bottom 15px
                left 50%
                transform translate(-50%, 0)
</style>
